<template>
	<view class="apps">
		<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
		<view class="mlr20 flex fdc bgwhite mtb20" v-if="current == 0">
			<uv-list>
				<uv-list-item  v-for="(item,index) in device" :key="index"
					:title="item.name" 
					:note="item.address"
					:clickable="true"
					thumb="https://mp.lifecloud.top/static/images/engine.jpg"
					thumb-size="lg" 
					:rightText="`设备数[`+item.device_num+`]···导航···`" @click="toLocation(item)">
				</uv-list-item>
			</uv-list>
		</view>
		<view v-if="current == 1" style="height:calc(100vh - 50px) ;">
			<map id="map" :latitude="42.832672" :longitude="93.503074" :markers="markers" style="width:100%;height:calc(100vh - 50px)" scale="13"></map>
		</view>
		<view class="scan" @click="scan()">
			<uv-avatar src="https://mp.lifecloud.top/static/images/sao.png" size="50px"></uv-avatar>
		</view>
	</view>
</template>

<script>
	const logo = 'https://mp.lifecloud.top/static/images/lct.png'
	import { util } from '/common/util.js';
	let app;
	export default {
		data() {
			return {
				list:['列表模式','地图模式'],
				current:0,
				markers:[],
				device:[]
			}
		},
		onLoad() {
			app = this;
			this.getDevice();
		},
		onReady(){
			 this._mapContext = uni.createMapContext("map", this);
		},
		methods: {
			scan(){
				wx.scanCode({
				  onlyFromCamera: true,
				  scanType:['qrCode'],
				  success (res) {
					  if(res.errMsg == 'scanCode:ok'){
						  uni.navigateTo({
							url:'/pages/engine/engine?q='+encodeURIComponent(res.result),
						  })
					  }
				  }
				})
			},
			change(index) {
				this.current = index;
			},
			getDevice(){
				util.request({
					url:'/mpindex/place',
					type:"POST",
				}).then((res)=>{
					if(res.code == 200){
						app.device = res.data;
						res.data.forEach(function(item,index) {
							app.markers.push({
								id:index+1,
								latitude:item.lat_lng[0],
								longitude:item.lat_lng[1],
								title:item.name+'洗车站',
								iconPath:logo,
								width:36,
								height:50,
								label: {
									content: item.name+'洗车站',
									color: "#ffffff",
									bgColor: "#5581fa",
									fontSize: 12,
									padding:4,

								}
							})
						}, this);
						
					}
				})
			}
		}
	}
</script>

<style scoped>
.scan{position: fixed;z-index: 1000000;width:50px;height:50px;border-radius: 100%;background-color: #badafb;bottom:80px;left:50%; margin-left: -25px;display: flex; align-items: center;}
</style>
